<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4">
            <img class="logo" src="../../assets/logo.jpg" alt="" />
          </el-col>
          <el-col :span="16"><h2 class="title">鼎鑫网吧管理系统</h2></el-col>
          <el-col :span="4" class="quit-login" @click="quit">退出登录</el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- @open="handleOpen" @close="handleClose" -->
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active="activePath" text-color="#fff" router>
            <!-- router开启路由模式，通过标签里面的index来进行跳转 -->
            <el-menu-item :index="item.path" v-for="(item, index) in routerArr" :key="index">
              <span>
                {{ item.meta.title }}
              </span>
            </el-menu-item>
          </el-menu></el-aside
        >
        <el-main>
          <!-- 设置路由出口 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const activePath = route.path
// console.log(router.getRoutes())
const routerArr = router.getRoutes().filter((item) => item.meta.isShow)
const quit = () => {
  localStorage.removeItem('token')
  router.push('/login')
}
// console.log(routerArr)
</script>

<style lang="less" scoped>
.el-header {
  height: 80px;
  background-color: #666;
  color: #fff;
  .logo {
    width: 80px;
  }
  .title,
  .quit-login {
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
}

.el-aside {
  .el-menu {
    height: calc(100vh - 30px);
  }
}
</style>
